import React from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import TextField from '@mui/material/TextField';
import FormHelperText from '@mui/material/FormHelperText';
import Event from '../formHoc'
//
const _ = window._;

@Event
class IndexInput extends React.PureComponent{
    options = {
        name:'',
        text:'No label',
        value:'',
        defaultValue:'',
        error:'',
        rules:[],
        props:{},
        onChange:()=>{},
        onKeyDown:()=>{},
        prefix:()=>{},
        subfix:()=>{},
    }

    handleChange = (e)=>{
        this._set(e.target.value);
        this._validate();
        this.options.onChange(this.props.data,this.options);
    }

    constructor(props){
        super();
        this._extendColumn(props);
    }

    render(){
        let opt = this.options;
        return (
            <FormControl fullWidth >
                <div className="flr fl-middle">
                    { opt.prefix() }
                    <TextField
                        InputProps={opt.InputProps}
                        className="flbox"
                        error={Boolean(opt.error)}
                        size="small"
                        label={opt.text}
                        value={opt.value}
                        onChange={this.handleChange}
                        onKeyUp={this.options.onKeyDown}
                        margin={'dense'} {...opt.props}/>
                    { opt.subfix() }
                </div>
            </FormControl>
        )
    }
}

export default IndexInput;
